<template>
  <div>
    <el-row class="title">类型：
      <el-radio-group v-model="post.type" size="mini">
        <el-radio :label="0" border>丢了东西</el-radio>
        <el-radio :label="1" border>捡到东西</el-radio>
      </el-radio-group>
    </el-row>

    <el-row class="title">物品：</el-row>
    <el-radio-group v-model="post.itemTypeId" size="mini">
      <el-radio-button :label="item.id" v-for="item in itemTypeList">{{item.type}}</el-radio-button>
    </el-radio-group>

    <el-row class="title">标题：</el-row>
    <el-input v-model="post.title" placeholder="校园卡掉了(请尽量精简,具体内容放在详情里)"></el-input>

    <el-row class="title">图片：</el-row>
    <el-upload
      action=""
      list-type="picture-card"
      :auto-upload="false"
      :limit='5'
      :on-change="handleChange"
      :on-remove="handleRemove"
      :file-list="fileList"
      accept="image/jpg,image/jpeg,image/png">
      <i class="el-icon-plus" ></i>
    </el-upload>

    <el-row class="title">详情：</el-row>
    <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 10}" v-model="post.detail" placeholder="学号：2020112323
姓名：张三
找到请喝奶茶，救救孩子！
(发帖时不用填QQ，系统会自动填写，带图更容易找到，如果物品带有学号或姓名，请务必填写，以便搜索。)">
    </el-input>

    <el-row class="title">地点：</el-row>
    <div style="display: flex; align-items: center">
      <el-input v-model="post.address" placeholder="选填" style="margin-right: 10px"></el-input>
      <MapButton @getAddressInfo="getAddressInfo"></MapButton>
    </div>

    <div style="margin-top: 10px; text-align: center">
      <el-button @click="publish" type="primary">发布</el-button>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { getItemTypeList } from "@/api/post/itemType";
import { publish } from "@/api/post/post";
import { upLoadFile } from "@/api/file/file";
import MapButton from "@/components/MapButton.vue";

export default {
  components: { MapButton },
  data() {
    return {
      itemTypeList: [],
      fileList: [],
      user: {},
      post: {
        fromUserId: 0,
        type: 0,
        itemTypeId: 1,
        itemTypeName: '',
        title: '',
        imgUrlList: [],
        detail: '',
        address: '',
        latitude: 0,
        longitude: 0
      },
      itemTypeId: 1
    }
  },
  methods: {
    uploadImg(file) {
      let formData = new FormData()
      formData.set("file", file.raw)
      upLoadFile(formData).then(res => {
        if(res.data.code === 200) {
          this.post.imgUrlList.push(res.data.imgUrl)
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    handleChange(file, fileList) {
      this.fileList = fileList
      this.uploadImg(file)
    },
    handleRemove(file, fileList) {
      this.deleteFile(file.uid)
    },
    deleteFile(uid) {
      const index = this.fileList.findIndex(item => item.uid === uid)
      this.fileList.splice(index, 1)
      this.post.imgUrlList.splice(index, 1)
    },
    getAddressInfo(info) {
      this.post.address = info.title
      this.post.latitude = info.point.lat
      this.post.longitude = info.point.lng
    },
    publish() {
      this.post.itemTypeName = this.itemTypeList[this.post.itemTypeId - 1].type
      publish(this.post).then(res => {
        if(res.data.code === 200) {
          this.$router.push('/user/all')
          this.$message.success(res.data.message)
        } else {
          // this.$message.error(res.data.message)
        }
      })
    },
    getItemTypeList() {
      getItemTypeList().then(res => {
        if(res.data.code === 200) {
          this.itemTypeList = res.data.itemTypeInfoList
        } else {
          // this.$message.error(res.data.message)
        }
      })
    }
  },
  created() {
    this.user = JSON.parse(Cookies.get("user"))
    this.post.fromUserId = this.user.id
    this.getItemTypeList()
  }
}
</script>

<style scoped>
.title {
  font-weight: bold;
  font-size: 14px;
  margin: 10px 0 10px 0;
}
</style>
